import './setup' // 确保Chart.js组件被注册
import { getCategoryLabel } from '../../utils'

interface EfficiencyData {
  avgCompletionDays: number
  delayRate: number
  categoryEfficiency: Array<{
    category: string
    avgDays: number
    completedCount: number
  }>
  totalCompletedTasks: number
}

interface EfficiencyMetricsChartProps {
  data: EfficiencyData
}

export default function EfficiencyMetricsChart({ data }: EfficiencyMetricsChartProps) {
  if (!data.categoryEfficiency || data.categoryEfficiency.length === 0) {
    return (
      <div className="h-64 flex items-center justify-center text-theme-text-muted">
        <div className="text-center">
          <div className="w-16 h-16 bg-theme-bg-tertiary rounded-full flex items-center justify-center mx-auto mb-3">
            📊
          </div>
          <p>暂无效率数据</p>
        </div>
      </div>
    )
  }

  // 计算效率分数
  const getEfficiencyScore = (cat: any) => {
    // 基础分数：天数越少分数越高
    const speedScore = Math.max(0, Math.min(100, 100 - (cat.avgDays * 12)))
    // 数量加成：完成任务数量
    const volumeScore = Math.min(30, cat.completedCount * 5)
    return Math.min(100, speedScore + volumeScore)
  }

  const sortedData = [...data.categoryEfficiency]
    .sort((a, b) => getEfficiencyScore(b) - getEfficiencyScore(a))
    .slice(0, 5)

  return (
    <div className="h-64 p-2">
      <div className="space-y-3">
        {sortedData.map((cat, index) => {
          const score = getEfficiencyScore(cat)
          const isTop = index === 0
          
          return (
            <div key={cat.category} className="space-y-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  {isTop && <span className="text-lg">🏆</span>}
                  <span className={`text-sm font-medium ${isTop ? 'text-amber-700' : 'text-theme-text-secondary'}`}>
                    {getCategoryLabel(cat.category)}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span className={`text-sm font-bold ${
                    score >= 80 ? 'text-green-600' :
                    score >= 60 ? 'text-blue-600' :
                    score >= 40 ? 'text-orange-600' : 'text-red-600'
                  }`}>
                    {Math.round(score)}
                  </span>
                  <span className="text-xs text-theme-text-muted">分</span>
                </div>
              </div>
              
              <div className="relative">
                <div className="w-full bg-slate-200 rounded-full h-2">
                  <div
                    className={`h-2 rounded-full transition-all duration-1000 ease-out ${
                      score >= 80 ? 'bg-gradient-to-r from-green-500 to-green-600' :
                      score >= 60 ? 'bg-gradient-to-r from-blue-500 to-blue-600' :
                      score >= 40 ? 'bg-gradient-to-r from-orange-500 to-orange-600' :
                      'bg-gradient-to-r from-red-500 to-red-600'
                    }`}
                    style={{ 
                      width: `${score}%`,
                      animationDelay: `${index * 200}ms`
                    }}
                  ></div>
                </div>
              </div>
              
              <div className="flex justify-between text-xs text-theme-text-muted">
                <span>平均 {cat.avgDays} 天完成</span>
                <span>{cat.completedCount} 个任务</span>
              </div>
            </div>
          )
        })}
        
        {sortedData.length === 0 && (
          <div className="text-center py-8 text-theme-text-muted">
            <div className="text-4xl mb-2">📈</div>
            <p>暂无效率数据</p>
          </div>
        )}
      </div>
    </div>
  )
}
